<template>
  <div class="alarmTypes-root">
    <formTitleVue
      title="风险等级汇总"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPie domId="earlyWarning-alarmTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPie from '@/components/Echarts/myPie.vue';
import { time_select_optios } from '@/utils/global.js';
import { riskHazardGradeStatistics
} from '@/api/risk/riskHazard'
export default {
  name: "alarmTypes",
  components: {
    formTitleVue,myPie,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {

        yData: []
      },
      echartsOption:{
        
      },
      searChForm: {
        startTime: '',
        endTime: '',
        areaCode:'',
        placeType:''
      },
    };
  },
  methods: {
    selectChange(item) {
      console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData();
    },
    async getData(){
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
      let respon = await riskHazardGradeStatistics(this.searChForm);

      this.chartsData.yData = [
        {
          name:"风险等级分布",
          data: respon.data.report
        }
      ]
      this.chartsData.yData.forEach(item => {
        item.data.forEach(item => {
          item.label = {
            normal:{
              show: true,
              formatter: "{b} {d}%",
            }
          }
        })
      })
    },
  },
  mounted() {
    this.selectChange("近一月");
  },
};
</script>

<style lang="scss" scoped>
.alarmTypes-root {
  #echarts-types {
    height: 30vh;
  }
}
</style>
